<template>
    <div>
        <el-container>
            <SideMenu />
            <el-container direction="vertical">
                <TopHeader />
                <el-main>
                    <el-scrollbar :height="`${pageHeight-100}px`">
                        <router-view></router-view>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import TopHeader from '@/components/index/TopHeader.vue';
import SideMenu from '@/components/index/SideMenu.vue';
import {ref,watchEffect} from "vue"

const pageHeight = ref(window.innerHeight);

// 监听窗口大小变化来更新页面高度
watchEffect(() => {
    pageHeight.value = window.innerHeight;
});

</script>